@extends('front.public_layout.layout')


@section('style')
    <link rel="stylesheet" href="{{asset('/front/css/article.css')}}">
    <style>

    </style>
@endsection

@section('content')
    <div class="middle-content find-video">

        <div class="video-list">

{{--            @foreach($video_article as $videoArticle)--}}
{{--                <div class="v-item">--}}
{{--                    <a href="{{ url('article/details/'.$videoArticle->id) }}">--}}
{{--                        <div class="v-img">--}}
{{--                            <img src="{{ $videoArticle->list_img_url }}" alt="">--}}
{{--                            <div class="v-info">--}}
{{--                                <div class="v-i-play">{{ $videoArticle->read_num }}</div>--}}
{{--                                <div class="v-i-zan">{{ $videoArticle->zan_num }}</div>--}}
{{--                                <div class="v-i-time">{{ date('m-d', strtotime($videoArticle->created_at)) }}</div>--}}
{{--                            </div>--}}
{{--                        </div>--}}

{{--                        <div class="v-title">{{ $videoArticle->article_title }}</div>--}}
{{--                    </a>--}}

{{--                    <div class="zuozhe">--}}
{{--                        <img src="{{ $videoArticle->articles_author->avatar_url }}" alt="">--}}
{{--                        <div>{{ $videoArticle->created_at }}</div>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--            @endforeach--}}


            <div class="clear video-clear"></div>
        </div>
        <div class="more-btn" onclick="article_list()">查看更多</div>

    </div>

@endsection


@section('js')

    <script>


        var is_region = '{{ $is_region }}' * 1;


        var article_url = '{{ url('ajax_category_article_lists') }}';
        function article_list() {
            $.post(article_url, {
                _token: '{{ csrf_token() }}',
                types: 3
            }, function (data) {
                if (data.status == 1) {
                    if (data.data.next_page_url) {
                        article_url = data.data.next_page_url;
                        $('.more-btn').show();
                    } else {
                        $('.more-btn').hide();
                    }

                    var html = '';
                    $.each(data.data.data,function(index,item){
                        html += '<div class="v-item">';

                        html += '   <a href="'+'{{url('article/details')}}'+'/'+item.id+'">';
                        html += '       <div class="v-img">';
                        html += '           <img src="'+item.list_img_url+'">';
                        html += '           <div class="v-info">';
                        html += '                <div class="v-i-play">'+item.read_num+'</div>';
                        html += '                <div class="v-i-zan">'+item.zan_num+'</div>';
                        html += '                <div class="v-i-time">'+item.created_at+'</div>';
                        html += '           </div>';
                        html += '       </div>';
                        html += '       <div class="v-title">';
                        html += '       '+item.article_title;

                        html += '       </div>';
                        html += '   </a>';
                        html += '   <a class="zuozhe" href="'+'{{url('author')}}'+'/'+item.articles_author.id+'">';
                        html += '       <img src="'+item.articles_author.avatar_url+'" alt="">';
                        html += '       <div>'+item.created_at+'</div>';
                        html += '    </a>';
                        html += '</div>';
                    });

                    $('.video-clear').before(html);

                } else {

                }
            }, 'json');
        }
        article_list();

    </script>
@endsection